<template>
  <Card title="会员年龄分布" :loading="loading" hoverable>
    <template #extra>
      <div class="extra-item">
        <a-select v-model:value="value" show-search :filterOption="false" allow-clear placeholder="请选择地区" :fieldNames="fieldNames" @change="airportChange" style="width: 200px" @search="search" :options="options"></a-select>
      </div>
    </template>
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
import { onMounted, Ref, ref, watch } from 'vue';
import { Card, SelectProps } from 'ant-design-vue';
import { useECharts } from '@/hooks/web/use-echarts';
import { useDataSource } from '@/hooks/web/use-echarts/useDataSource';
import { airportList } from '@apps/ant-bus/src/views/business/airport/data/api';
const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '350px',
  },
});
const options = ref<SelectProps['options']>([
  { value: 'jack', label: '凤凰机场' },
  { value: 'lucy', label: '白云山机场' },
  { value: 'tom', label: '上海浦东国际机场' },
]);
const fieldNames = {
  label: 'airportName',
  value: 'airportId',
};
const value = ref();
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
let { queryData } = useDataSource(props, initOptions);

/**
 * 初始化
 */
function initOptions(chartData) {
  let option: any = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      bottom: '1%',
      left: 'center',
    },
    series: [
      {
        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
        name: '年龄段',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '12',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: chartData,
        animationType: 'scale',
        animationEasing: 'exponentialInOut',
        animationDelay: function() {
          return Math.random() * 100;
        },
      },
    ],
  };
  setOptions(option);
}

function initData(params) {
  queryData({
    url: 'adminTotal/ageProportion',
    params,
  });
}
function search(value) {
  airportList({
    airportName: value,
    handlerName: 'busAirportRoleListHandler',
  }).then(res => {
    options.value = res;
  });
}

onMounted(() => {
  airportList({
    airportName: '',
    handlerName: 'busAirportRoleListHandler',
  }).then(res => {
    options.value = res;
  });
});
function airportChange() {
  initData({
    airportId: value.value,
  });
}

watch(
  () => props.loading,
  () => {
    if (props.loading) {
      return;
    }
    initData({});
  },
  { immediate: true },
);
</script>
